/* eslint-disable react/prop-types */
import {
  Box,
  Center,
  Flex,
  Icon,
  Image,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { MdCheckCircle } from 'react-icons/md';
import { memo } from 'react';

import shuffle_png from 'assets/images/controlNet_shuffle.png';
import mlsd_png from 'assets/images/controlNet_mlsd.jpg';
import lineart_png from 'assets/images/controlNet_lineart.jpg';
import canny_png from 'assets/images/controlNet_canny.jpg';
interface EasyControlNetItemProps {
  label?: string;
  image?: string;
  description?: string | null;
  isSelected?: boolean;
  value: string;
  onClick: (v: string) => void;
}

export const CONTROLNETMODES: { [k: string]: string } = {
  lineart: '动漫线稿细化',
  mlsd: '直线提取',
  shuffle: '内容重组',
  canny: '边缘检测',
};

const controlNet_pngs: { [k: string]: string } = {
  lineart: lineart_png,
  mlsd: mlsd_png,
  shuffle: shuffle_png,
  canny: canny_png,
};

const EasyControlNetItem = (props: EasyControlNetItemProps) => {
  const { isSelected, image, label, onClick, value } = props;
  return (
    <Flex flexDirection="column" gap="2">
      <Box
        w="16rem"
        rounded="md"
        h="16rem"
        onClick={() => onClick(value)}
        border="3px solid"
        borderColor={isSelected ? 'base.50' : 'base.850'}
        _light={{
          borderColor: isSelected ? 'accent.700' : 'base.850',
        }}
        bg="base.900"
        cursor="pointer"
        textAlign="center"
        position="relative"
      >
        <Center top={1} right={1} position="absolute">
          {isSelected && (
            <Icon
              borderRadius="full"
              color="base.50"
              _light={{
                color: 'accent.700',
              }}
              as={MdCheckCircle}
              fontSize="1.5rem"
            />
          )}
        </Center>

        <Image
          maxH="100%"
          w="100%"
          objectFit="cover"
          borderRadius="base"
          src={image || controlNet_pngs[label as keyof typeof controlNet_pngs]}
          loading="lazy"
        />

        <Text
          position="absolute"
          fontWeight={600}
          bottom="2"
          left="2"
          px="4"
          py="2"
          rounded="base"
          bg={useColorModeValue('whiteAlpha.400', 'blackAlpha.600')}
          backdropFilter="auto"
          backdropBlur="10px"
          color="base.100"
        >
          {CONTROLNETMODES[props.label as keyof typeof CONTROLNETMODES] ||
            props.label}
        </Text>
      </Box>
      {props.description && <Text>{props.description}</Text>}
    </Flex>
  );
};

export default memo(EasyControlNetItem);
